<template>
    <div class="FormSolutionComponent">
        <RxLoading v-if="Loading"></RxLoading>
        <rx-layout v-else>
            <template v-slot:center>
                <rx-form
                 v-if="resForm"
                 ref="RxForm"
                 :context-data="contextData"
                 :action="action"
                 :formJs="formJs"
                 :openReadonly="readonly"
                 @dataChange="dataChange"
                 :backfillParams="backfillParams"
                 :resForm="resForm"/>
            </template>
            <template v-if="!QRCodeForm" v-slot:footer>
                <rx-button-list :buttonLoading="buttonLoading" :localButtons="buttons" @change="handMethod"></rx-button-list>
            </template>
        </rx-layout>
    </div>
</template>

<script>
import FormApi from "@/api/modules/form/formApi";
import RxLayout from '@/components/RxLayout'
import FormSolutionFunc from './FormSolutionFunc'
import Util from "@/js/Util.js";
import RxButtonList from "@/components/RxButtonList"
import RxLoading from '@/components/RxLoading'
import RxForm from '../RxForm'
import {defineAsyncComponent } from 'vue'
export default {
    name: "FormSolutionComponent",
    mixins: [FormSolutionFunc],
    props: {
        /**
         * 用于页面定制控件渲染
         */
        paramsControl: {},
        /**
         * 关闭对话框方法，支持返回数据。
         */
        dialogClose:{
            type: Function,
        },
        //是否弹框打开表单
        isShowFormDialog: false,
        QRCodeForm:false,
        //回填传入的参数
        backfillParams:{
            type:Object
        }
    },
    data() {
        return {
            formJs: {},
            resForm: {},
            //状态edit编辑，detail明细
            action: 'edit',
            formSolution: {},
            flowDefId: '',
            params: {},
            Loading:true,
            buttonLoading:{
            key:'',
            },
        }
    },
    computed:{
        readonly(){
            if(this.paramsControl && this.paramsControl.readonly){
                return this.paramsControl.readonly
            }
            return false
        }
    },
    components: {
        // #ifdef H5
        RxForm:defineAsyncComponent(()=>import('../RxForm')),
        // #endif
        // #ifdef APP-PLUS
        RxForm,
        // #endif
        RxLayout,
        RxButtonList,
        RxLoading
    },
    async onLoad(option) {
        let openFormParams = uni.getStorageSync('openFormParams') ;
        option.params = option.params ? option.params : openFormParams;
        if (option.params && !this.paramsControl) {
            this.params = JSON.parse(option.params);
            this.action = this.params.action;
            await this.init(this.params)
        }
    },
    created() {
        if (this.isShowFormDialog) {
            this.initDialog();
            return;
        }
        if (this.paramsControl) {
            this.params = {
                action: this.paramsControl.action,
                alias: this.paramsControl.alias,
                pk: this.paramsControl.pkId,
                params:this.paramsControl.params
            }
            this.action = this.params.action;
            this.init(this.params)
        }
    },
    methods: {
        async initDialog() {
            this.params = this.paramsControl;
            if(this.params.relData){
                this.resForm = this.params.relData;
            }
            this.action = this.params.action;
            this.init(this.params)
        },
        async init(params) {
            if (!params.alias) {
                return
            }
            let jsonParams = params.jsonParams ? params.jsonParams : '';
            let paramsJs = {
                alias: params.alias,
            }
            let pk = params.pk ? params.pk : '';
            if(params.params){
                Object.assign(paramsJs, params.params);
            }
            let res = await FormApi.getSolutionByAlias(params.alias, pk, this.params.action, paramsJs);
            if (jsonParams) {
                Object.assign(res.data, jsonParams);
            }
            if(res.globalConfig){
                uni.setStorage({key: "globalConfig", data: JSON.parse(res.globalConfig)})
            }else {
                uni.setStorage({key: "globalConfig", data: {}})
            }
            let scriptJs = Util.replaceDefault(res.script);
            this.resForm = res;
            this.formJs = new Function('return ' + scriptJs)();
            this.formSolution = res.formSolution;
            if (res.formSolution.flowDefId) {
                this.flowDefId = res.formSolution.flowDefId
                this.initProcessConfig(this.flowDefId)
            }
            // 按钮定义。
            this.buttons = this.getButtons(res);
            //设置标题
            if (!this.isShowFormDialog || this.$route.path!='/views/modules/form/FormCustomView/FormCustomView') {
                //弹窗不设置标题，在外面弹窗的窗口设置标题
                uni.setNavigationBarTitle({
                    title: this.formSolution.name
                });
            }
            let user = uni.getStorageSync("user");
            this.contextData = {
                type: "form",
                curUserId: user.userId,
                curUserName: user.fullName,
                account: user.account,
                deptId: user.deptId,
                tenantId: user.tenantId
            };
            this.Loading=false;
        },
        dataChange:Util.debounce(function (data){
            if(this.action == "detail"){
                return;
            }
            let self_=this;
            FormApi.getButtonsByFormJson(self_.formSolution.alias,data).then(res=>{
                self_.buttons = self_.getButtons(res);
            })
        },300),
    },
    watch:{
        paramsControl: {
            handler: function (val) {
                if(!val){
                    return;
                }
                this.params = {
                    action: val.action,
                    alias: val.alias,
                    pk: val.pkId,
                    params:val.params
                }
                this.init(this.params)
            },
            deep:true
        }
    }
}
</script>

<style scoped>
.FormSolutionComponent>>>.RxLayout-footer{
    padding: 0rem!important;
}
.FormSolutionComponent {
    height: 100%;
}

.FormSolutionComponent-button {
    background-color: #007bff;
    color: #fff;
    height: 2rem;
    flex: 1;
    line-height: 2rem;
    font-size: 14px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.FormSolutionComponent>>>.RxLayout-center{
    padding: 0rem!important;
}
</style>
